<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论回复</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <script src="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js" charset="utf-8"></script>
</head>

<body>
    <div style="padding: 15px;margin: 15px;background-color: #fff;">
        <!-- 表单 -->
        <form class="layui-form" action="">
            {:token_field()}
            <input type="hidden" name="id" value="{$row['id']}">
            <div class="layui-form-item">
                <label class="layui-form-label">评论者</label>
                <div class="layui-input-block">
                    <input type="text" name="name" value="{$row['name']}" lay-verify="required" placeholder="请输入" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">评论内容</label>
                <div class="layui-input-block">
                    <textarea name="comment" placeholder="请输入内容" class="layui-textarea" lay-verify="required">{$row['comment']}</textarea>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">回复内容</label>
                <div class="layui-input-block">
                    <textarea name="recomment" placeholder="回复内容" class="layui-textarea" lay-verify="required"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit="reply" lay-filter="submit">保存</button>
                    <!-- lay-submit -->
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

    </div>

    <!-- js -->
    <script>
        layui.use(['form', 'upload', 'layedit', 'laydate', 'colorpicker', 'tree'], function () {
            var form = layui.form
                , upload = layui.upload
                , layedit = layui.layedit
                , laydate = layui.laydate
                , colorpicker = layui.colorpicker
                , tree = layui.tree
                , $ = layui.jquery;

            //获取应用、控制器和方法
            var module = '{:app("http")->getName()}'
                , controller = '{$Request.controller}'
                , action = '{$Request.action}';

            // 日期
            $('form .date').each(function () {
                laydate.render({
                    elem: 'input[name="' + $(this).attr('name') + '"]',
                    type: $(this).data('type') || 'date'
                });
            });

            // 颜色
            $('form .color').each(function () {
                var input_id = $(this).attr('name');
                $(this).parent().parent().append('<div class="layui-inline" style="left: -11px;"><div id="' + input_id + '-render"></div></div>');
                colorpicker.render({
                    elem: '#' + input_id + '-render',
                    done: function (color) {
                        $('input[name="' + input_id + '"]').val(color);
                    }
                });
            });

            // 上传
            $('form .upload').each(function () {
                var input_id = $(this).attr('name');
                $(this).parent().append('<div class="layui-upload-list" style="position:relative;"></div>');
                $(this).parent().parent().append('<button type="button" class="layui-btn layui-btn-primary" id="' + input_id + '-render"><i class="layui-icon layui-icon-upload"></i> 上传</button>');
                if (/\.(gif|jpg|jpeg|png|bmp|webp|psd|svg|tiff)$/gi.test($(this).val())) {
                    $(this).parent().find('.layui-upload-list').html('<i class="layui-icon layui-icon-close-fill" style="position:absolute;bottom:-10px;left:-10px;opacity:0.8;cursor:pointer;"></i><img src="' + $(this).val() + '" alt="Preview" style="max-width:92px" onerror="this.parentNode.innerHTML=\'404 Error\'" />');
                }
                upload.render({
                    elem: '#' + input_id + '-render',
                    url: '/' + module + '/files/upload',
                    data: {},
                    before: function (obj) {
                        layer.load();
                    },
                    done: function (res, index, upload) {
                        layer.closeAll('loading');
                        if (res.code > 0) return layer.msg('上传失败');
                        //上传成功
                        $(this.item).prev().find('input[name="' + input_id + '"]').val(res.data.src)
                        if (/\.(gif|jpg|jpeg|png|bmp|webp|psd|svg|tiff)$/gi.test(res.data.src)) {
                            $(this.item).prev().find('.layui-upload-list').html('<i class="layui-icon layui-icon-close-fill" style="position:absolute;bottom:-10px;left:-10px;opacity:0.8;cursor:pointer;"></i><img src="' + res.data.src + '" alt="Preview" style="max-width:92px" onerror="this.parentNode.innerHTML=\'404 Error\'" />');
                        }
                    },
                    error: function (index, upload) {
                        layer.closeAll('loading');
                    }
                });
            });
            $('form .upload').change(function () {
                if (/\.(gif|jpg|jpeg|png|bmp|webp|psd|svg|tiff)$/gi.test($(this).val())) {
                    $(this).parent().find('.layui-upload-list').html('<i class="layui-icon layui-icon-close-fill" style="position:absolute;bottom:-10px;left:-10px;opacity:0.8;cursor:pointer;"></i><img src="' + $(this).val() + '" alt="Preview" style="max-width:92px" onerror="this.parentNode.innerHTML=\'404 Error\'" />');
                } else {
                    $(this).parent().find('.layui-upload-list').html(null);
                }
            });
            $('form .layui-upload-list').on('click', '.layui-icon-close-fill', function () {
                $(this).parent().prev().val(null);
                $(this).parent().html(null);
            });

            // layedit富文本
            var editors = [];
            layedit.set({
                uploadImage: {
                    url: '/' + module + '/file/upload', //接口url
                    type: 'post', //默认post
                }
            });
            $('form .editor').each(function () {
                var editor_id = $(this).attr('name');
                $(this).attr('id', editor_id);
                $(this).attr('lay-verify', editor_id);
                editors[editor_id] = layedit.build(editor_id, {
                    tool: [
                        'strong', //加粗
                        'italic', //斜体
                        'underline', //下划线
                        'del', //删除线
                        '|', //分割线
                        'left', //左对齐
                        'center', //居中对齐
                        'right', //右对齐
                        '|', //分割线
                        'link', //超链接
                        'unlink', //清除链接
                        'image', //插入图片
                    ]
                });
            });

            // wangeditor富文本
            var weditors = [];
            window.wangEditor && $('form .weditor').each(function () {
                var weditor = window.wangEditor;
                var editor_id = $(this).attr('name');
                $(this).attr('id', editor_id).addClass('layui-hide');
                $(this).parent().prepend('<div id="' + editor_id + '"></div>');
                weditors[editor_id] = new weditor(document.getElementById(editor_id));
                weditors[editor_id].config.uploadImgServer = '/' + module + '/files/wangeditor_upload'; //接口url
                weditors[editor_id].config.onchange = function (html) {
                    $('#' + editor_id).parent().find('textarea[name="' + editor_id + '"]').val(html)
                }
                weditors[editor_id].create();
                weditors[editor_id].txt.html($('#' + editor_id).parent().find('textarea[name="' + editor_id + '"]').val())
            });

            // 监听提交（保存编辑）
            form.on('submit(submit)', function (data) {
                for (var editor in editors) {
                    data.field[editor] = layedit.getContent(editors[editor]);
                }
                $.post('/' + module + '/' + controller + '/' + (data.elem.getAttribute('lay-submit') || 'save_edit'), data.field, function (res) {
                    if (res.code) return layer.alert(res.msg, { icon: 2 });
                    layer.alert(res.msg, { icon: 1 });
                    setTimeout(function () {
                        var current = window, parentIndex = parent.layer.getFrameIndex(window.name);
                        if (typeof parentIndex !== 'undefined') {
                            parent.layer.close(parentIndex);
                            current = parent.window;
                        }
                        if (typeof res.url !== 'undefined' && res.url) {
                            current.location.href = res.url;
                        } else {
                            if (typeof current.layui.table !== 'undefined' && current.layui.table.index == 1 && typeof current.layui.laypage === 'undefined') {
                                current.layui.table.reload('dataTable');
                            } else {
                                current.location.reload();
                            }
                        }
                    }, 1000);
                }, 'json');
                return false;
            });

        });
    </script>

</body>

</html>